<template>
  <div class="delivery-manage">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>发货管理</span>
          <div class="header-buttons">
            <el-button type="success" @click="handleBatchShip">批量发货</el-button>
            <el-button type="primary" @click="handleExport">导出记录</el-button>
          </div>
        </div>
      </template>

      <!-- 搜索区域 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="searchForm.receiver" placeholder="请输入收货人" />
        </el-form-item>
        <el-form-item label="发货状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="待发货" value="pending" />
            <el-option label="已发货" value="shipped" />
            <el-option label="已签收" value="received" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 发货列表 -->
      <el-table 
        :data="deliveryList" 
        border 
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column label="商品信息" min-width="300">
          <template #default="scope">
            <div v-for="item in scope.row.items" :key="item.id" class="order-item">
              <el-image
                :src="item.image"
                style="width: 50px; height: 50px"
                :preview-src-list="[item.image]"
              />
              <div class="item-info">
                <div class="item-name">{{ item.name }}</div>
                <div class="item-spec">{{ item.spec }}</div>
              </div>
              <div class="item-quantity">x{{ item.quantity }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收货信息" width="250">
          <template #default="scope">
            <div>{{ scope.row.receiver }}</div>
            <div>{{ scope.row.phone }}</div>
            <div class="address-text">{{ scope.row.address }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button 
              v-if="scope.row.status === '待发货'"
              type="primary" 
              size="small" 
              @click="handleShip(scope.row)"
            >
              发货
            </el-button>
            <el-button 
              v-else
              type="info" 
              size="small" 
              @click="handleViewLogistics(scope.row)"
            >
              物流信息
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 发货对话框 -->
    <el-dialog
      title="订单发货"
      v-model="shipDialogVisible"
      width="500px"
    >
      <el-form :model="shipForm" :rules="rules" ref="shipFormRef" label-width="100px">
        <el-form-item label="物流公司" prop="company">
          <el-select v-model="shipForm.company" placeholder="请选择物流公司">
            <el-option label="顺丰速运" value="SF" />
            <el-option label="中通快递" value="ZTO" />
            <el-option label="圆通速递" value="YTO" />
            <el-option label="韵达快递" value="YD" />
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" prop="trackingNo">
          <el-input v-model="shipForm.trackingNo" placeholder="请输入物流单号" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="shipForm.remark" rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="shipDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitShipForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 物流信息对话框 -->
    <el-dialog
      title="物流信息"
      v-model="logisticsDialogVisible"
      width="600px"
    >
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in logisticsInfo"
          :key="index"
          :timestamp="activity.time"
          :type="index === 0 ? 'primary' : ''"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  orderNo: '',
  receiver: '',
  status: '',
  dateRange: []
})

// 发货列表数据
const deliveryList = ref([
  {
    orderNo: 'DD20240318001',
    items: [
      {
        id: 1,
        name: '高级猫粮 - 三文鱼味',
        spec: '2kg装',
        quantity: 2,
        image: 'https://placeholder.com/100'
      }
    ],
    receiver: '张三',
    phone: '13800138000',
    address: '北京市朝阳区xxx街道xxx小区',
    status: '待发货',
    createTime: '2024-03-18 10:00:00'
  },
  {
    orderNo: 'DD20240318002',
    items: [
      {
        id: 2,
        name: '狗狗磨牙玩具',
        spec: '大号',
        quantity: 1,
        image: 'https://placeholder.com/100'
      }
    ],
    receiver: '李四',
    phone: '13900139000',
    address: '上海市浦东新区xxx路xxx号',
    status: '已发货',
    createTime: '2024-03-18 09:30:00'
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 发货对话框
const shipDialogVisible = ref(false)
const shipFormRef = ref(null)
const currentOrder = ref(null)
const selectedOrders = ref([])

const shipForm = reactive({
  company: '',
  trackingNo: '',
  remark: ''
})

const rules = {
  company: [{ required: true, message: '请选择物流公司', trigger: 'change' }],
  trackingNo: [{ required: true, message: '请输入物流单号', trigger: 'blur' }]
}

// 物流信息对话框
const logisticsDialogVisible = ref(false)
const logisticsInfo = ref([
  {
    time: '2024-03-18 10:00:00',
    content: '快件已签收，签收人：张三'
  },
  {
    time: '2024-03-18 09:30:00',
    content: '快件已到达【北京朝阳区xxx营业部】'
  },
  {
    time: '2024-03-18 08:00:00',
    content: '快件已从【北京转运中心】发出'
  },
  {
    time: '2024-03-17 20:00:00',
    content: '快件已到达【北京转运中心】'
  },
  {
    time: '2024-03-17 18:00:00',
    content: '快件已揽收'
  }
])

// 方法定义
const handleSearch = () => {
  ElMessage.success('搜索功能待实现')
}

const resetSearch = () => {
  searchForm.orderNo = ''
  searchForm.receiver = ''
  searchForm.status = ''
  searchForm.dateRange = []
}

const getStatusType = (status) => {
  const types = {
    '待发货': 'warning',
    '已发货': 'primary',
    '已签收': 'success'
  }
  return types[status] || 'info'
}

const handleSelectionChange = (val) => {
  selectedOrders.value = val
}

const handleShip = (row) => {
  currentOrder.value = row
  shipDialogVisible.value = true
}

const handleBatchShip = () => {
  if (selectedOrders.value.length === 0) {
    ElMessage.warning('请选择要发货的订单')
    return
  }
  ElMessage.success(`已选择 ${selectedOrders.value.length} 个订单进行发货`)
}

const handleViewLogistics = (row) => {
  logisticsDialogVisible.value = true
}

const handleExport = () => {
  ElMessage.success('导出功能待实现')
}

const submitShipForm = async () => {
  if (!shipFormRef.value) return
  
  await shipFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('发货成功')
      shipDialogVisible.value = false
    }
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-buttons {
  display: flex;
  gap: 10px;
}

.search-form {
  margin-bottom: 20px;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.order-item:last-child {
  border-bottom: none;
}

.item-info {
  flex: 1;
  margin: 0 15px;
}

.item-name {
  font-size: 14px;
  color: #333;
}

.item-spec {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.item-quantity {
  font-size: 14px;
  color: #666;
}

.address-text {
  color: #666;
  font-size: 12px;
  margin-top: 5px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 